*{
  margin: 0;
  padding: 0;
}
html,body,#app{
  height: 100%;
  width: 100%;
}
/*reset css*/
@charset "utf-8";

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, ol, ul, li, footer, header, menu, nav, audio, video, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
  -ms-tap-highlight-color: transparent;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, #app {
  background-color: #f2f2f2;
  // overflow: hidden;
  height: 100%;
  width: 100%;
  font-family: PingFangSC-Regular, sans-serif;
}

::-webkit-scrollbar {
  display: none;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: 500
}

/*reset css end*/

.container {
  position: relative;
}

.row {
  position: relative;
  width: 100%;
}

.relative {
  position: relative;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

.block {
  display: block !important;
}

.inline {
  display: inline !important;
}

.inline-block {
  display: inline-block !important;
}


/*flex*/

.flex {
  display: flex !important;
}

.flex-inline {
  display: inline-flex !important;
}

/*flex-direction*/

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.row-reverse {
  flex-direction: row-reverse;
}

.column-reverse {
  flex-direction: column-reverse;
}

/*flex-wrap*/

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/*justify-content*/
.space-around {
  justify-content: space-around;
}

.space-between {
  justify-content: space-between;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

/*align-items*/

.stretch {
  align-items: stretch;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-middle {
  align-items: center;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

/*页面布局*/
.viewBox {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background-color: #f2f2f2;
}

@media screen and (min-width: 800PX) {
  #app{
    width: 540PX;
    margin: 0 auto;
  }
  .viewBox {
    width: 540PX;
    margin: 0 auto;
  }

  .header {
    width: 540PX;
    margin: 0 auto;
  }
}

.wrapBox {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 3;
  background: #f2f2f2;
}